<template>
  <div class="c-bg-sgray">
    <div class="bgImg c-p">
      <div class="c-pa c-p-l38 c-p-t50 c-ww324 c-fc-white ">
        <p class="c-fs34">课程签到</p>
        <p class="c-fs28 c-mt20">你今天还有{{count}}节课需要签到</p>
      </div>
    </div>
    <div class="c-ph24 c-w100 mt-125">
      <div class="c-br10" :class="signList.length == 0 ? 'c-bg-white c-p' : ''">
        <div class="c-bg-white c-br10 c-mb20 c-ph24 c-p" v-for="(item,index) in signList" :key="index" v-if="signList.length > 0">
          <div class="c-fs24 c-pv20 c-flex-row c-aligni-center c-justify-sb c-bd-b1" @click="goCourseDetail(item.scid, item.saleCourseId, item.courseId)">
            <div class="c-fw-b c-text-ellipsis1">{{item.saleCourseName}}</div>
            <span class="iconfont c-fs20 c-fc-gray">&#xe908;</span>
          </div>
          <div class="c-pv20 c-flex-row">
            <div class="c-ww160 c-maxh106 c-text-hidden c-p">
              <img :src="$addXossFilter((item.image || item.courseCover), require('../../../public/i/wap/edu/enlist.png'))" alt="" class="c-ww160 c-maxh106 c-br10">
              <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-tl10 c-br-br32 c-pl6 c-pr16 c-lh30 c-bg-formal" :class="item.saleCourseType=='体验课'?'c-bg-experience':'c-bg-formal'">{{item.saleCourseType=='体验课'?'体验课':'正式课'}}</div>
            </div>
            <div class="c-pl20 c-fs20 c-fc-gray">
              <div class="">上课时间: {{isSameDay(item.startTime, item.endTime) ? `${getHM(item.startTime)} - ${getHM(item.endTime)}` : `${item.startTime} - ${item.endTime}`}}</div>
              <div class="c-mt10" v-if="item.isSignIn == 1">签到时间: {{item.signTime}}</div>
              <div class="c-ww260 c-mt10 c-text-ellipsis1">学员名称: {{item.studentName}}</div>
              <div class="c-mt10" v-if="item.saleType == 1 && item.saleCourseType != '体验课'">消耗课时: {{item.consume}}</div>
            </div>
          </div>
          <div class="c-pa c-p-r0 c-p-b0 c-br-tl10 c-br-br10 c-ww120 c-hh48 c-lh48 c-textAlign-c c-fs24 c-fc-white" :class="item.isSignIn != 0 ? 'imgCloseBig c-bg-ccc ' : 'theme-bg-gradient'" @click="goSingIn(item.id)">{{item.isSignIn == 1 ? "已签到" : (item.isSignIn == 0 ? "签到" : (item.isSignIn == 3 ? "请假" : '未到'))}}</div>
        </div>
      </div>
    </div>
    <loading-status-tem :noDataText="'今日无需签到'" :dataStatus="dataStatus"></loading-status-tem>
  </div>
</template>

<script>

import { utilJs } from "@/utils/common";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let pageIndex = 1;
let isClick = false;
export default {
  name: 'SignIn',
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      signList: [],
      count: '',
      dataStatus: 'HAS_MORE_DATA',
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
    // 判断是否跨天
    isSameDay() {
      return function (start, end) {
        let startTime = new Date(start);
        let endTime = new Date(end);
        let isSameDay = startTime.getFullYear() == endTime.getFullYear() && startTime.getMonth() == endTime.getMonth() && startTime.getDate() == endTime.getDate();
        return isSameDay;
      }
    },
    // 获取时分
    getHM () {
      return function (time) {
        let startTime = new Date(time);
        let hours = startTime.getHours() > 9 ? '' + startTime.getHours() : '0' + startTime.getHours();
        let minutes = startTime.getMinutes() > 9 ? '' + startTime.getMinutes() : '0' + startTime.getMinutes();
        return `${hours}:${minutes}`
      }
    }
  },
  watch: { },
  methods: {
    getSignList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "educationSystem/reservation/signList?page=" + pageIndex, res => {
        this.count = res.count
        if (pageIndex == 1) {
          this.signList = res.list.data;
        } else {
          this.signList = [...this.signList, ...res.list.data];
        }
        if (res.list.total * 1 == this.signList.length) {
          this.dataStatus = res.list.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    goSingIn(id) {
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "educationSystem/reservation/sign", { id: id }, res => {
        isClick = false;
        if (Array.isArray(res)) {
          this.$showCjToast({
            text: "签到成功",
          });
          setTimeout(res => {
            pageIndex = 1;
            this.signList = [];
            this.getSignList();
          }, 1000)
        } else {
          this.$cjConfirm({
            title: '提示',
            message: `课程开始前${res.signBeforeHour}小时可签到，课程结束后${res.signAfterHour}小时停止签到`,
            showCancelButton: false,
            clickCloseModal: false
          })
        }
      }, failRes => {
        isClick = false;
      })
    },
    goCourseDetail(scid, saleCourseId, courseId) {
      if (scid == 0 || scid == null || scid == '') {
        this.$cjConfirm({
          title: '提示',
          message: '该日程为管理员直接安排的体验课，因此无法跳转课程主页！',
          showCancelButton: false,
          clickCloseModal: false
        })
        return;
      }
      this.$routerGo(this, "push", {
        path: "/edu/courseDetail",
        query: {
          scid: scid,
          saleCourseId,
          courseId
        }
      })
    },
    //分享
    wechatShare: function () {
      let title = "签到";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/signIn/?&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "签到";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/signIn/?&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.signList.length > 0) {
          this.getSignList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("签到");// eslint-disable-line
    this.dataStatus = 'HAS_MORE_DATA';
    isClick = false;
    this.count = "";
    pageIndex = 1;
    this.signList = [];
    this.getSignList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mt-125 {
  margin-top: -3.125rem;
}
.bgImg {
  width: 16rem;
  height: 8.325rem;
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/edu/signInBg.png");
  background-size: 100% 100%;
}
</style>
